<template>
  <div>
    <h2>name:{{ name }}</h2> <br>
    <h2>当前求和为：{{ sum }}</h2> <br>
    <h2>当前求和*100为：{{ bigSum }}</h2> <br>
    <select v-model.number="number">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    &nbsp;
    <button @click="increment(number)">+</button>&nbsp;
    <button @click="minus(number)">-</button>&nbsp;
    <button @click="incrementOdd">奇数+</button>&nbsp;
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data() {
        return {
            number:1
        }
    },
    methods: {
        ...mapActions({
            increment:'jia',//注意参数的写法,参数可以直接写data中的数据
        }),
        ...mapActions(['minus']),//简写形式
       /*  increment(){
            this.$store.dispatch('jia',this.number);
        }, */
        /* minus(){
            this.$store.dispatch('minus',this.number);
        }, */
        incrementOdd(){
            this.$store.dispatch('jiaOdd',this.number);
        }
    },
    mounted() {
        console.log(this);
    },
    computed:{
        //靠mapstate生成
        //将一个对象的key-value单独拎出来放到另一个对象中 使用...
        ...mapState({
            sum:'sum',//键为该组件中的引用名，值为state中的属性名。当两个名称一致时，可以使用简写形式
        }),
        ...mapState(['name']),

        //自己写计算数属性定义sum
        /* sum(){
            return this.$store.state.sum;
        }, */


        //自己写计算数属性定义bigSum
/*         bigSum(){
            return this.$store.getters.bigSum;
        }, */
        ...mapGetters(['bigSum']),//mapGetters的使用和mapState一样

    }
}
</script>

<style>
</style>